<template>
	<view class="ikz-ordertop">
		<view class="ikz-ordertop-top">
			<view class="ikz-order-top-title">
				我的订单
			</view>
			<view class="ikz-order-top-more" @click="myOrder('')">
				查看全部
			</view>
		</view>
		<view class="ikz-ordertop-list">
			<view class="ikz-ordertop-item" @click="myOrder(0)">
				<image class="ikz-ordertop-img" src="/static/ordertop/order.png"></image>
				<view class="ikz-ordertop-item-title">
					待付款
				</view>
				<view class="ikz-ordertop-item-num" v-if="orderNumber.not_pay_count">
					{{orderNumber.not_pay_count}}
				</view>
			</view>
			<view class="ikz-ordertop-item" @click="myOrder(1)">
				<image class="ikz-ordertop-img" src="/static/ordertop/order1.png"></image>
				<view class="ikz-ordertop-item-title">
					待接单
				</view>
				<view class="ikz-ordertop-item-num" v-if="orderNumber.not_receive_count">
					{{orderNumber.not_receive_count}}
				</view>
			</view>
			<view class="ikz-ordertop-item" @click="myOrder(4)">
				<image class="ikz-ordertop-img" src="/static/ordertop/order2.png"></image>
				<view class="ikz-ordertop-item-title">
					已取消
				</view>
			</view>
			<view class="ikz-ordertop-item" @click="myOrder(3)">
				<image class="ikz-ordertop-img" src="/static/ordertop/over.png"></image>
				<view class="ikz-ordertop-item-title">
					已完成
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ordertop',
		props: {
			showData: {
				type: Object,
			},
			orderNumber: {
				type: Object,
			}
		},
		data() {
			return {};
		},
		watch: {
			orderNumber: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			},
		},
		mounted() {

		},
		methods: {
			myOrder(e) {
				if(!uni.getStorageSync("user_info")) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}
				uni.navigateTo({
					url: '/pages/Component/Module/Campus/Program/Order/myorder/index?status=' + e
				})
			}
		}
	};
</script>

<style scoped>
	.ikz-ordertop {
		box-sizing: border-box;
		width: 95%;
		background: #fff;
		margin: 0 auto;
		border-radius: 15rpx;
		padding: 0 0 20rpx 0;
	}

	.ikz-ordertop-top {
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 60rpx;
	}

	.ikz-order-top-title {
		font-weight: 800;
		font-size: 28rpx;
	}

	.ikz-order-top-more {
		font-size: 26rpx;
		color: #888;
	}

	.ikz-ordertop-list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ikz-ordertop-item {
		position: relative;
		wdith: 25%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.ikz-ordertop-img {
		width: 70rpx;
		height: 70rpx;
	}

	.ikz-ordertop-item-title {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.ikz-ordertop-item-num {
		position: absolute;
		right: 30rpx;
		top: -10rpx;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		background: #FBAB7E;
		border-radius: 50%;
		font-size: 23rpx;
	}
</style>
